<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-cell title="商家积分" size="large" />
    <div class="points">
      <h4 style="font-size: 32px">{{ points }}</h4>
    </div>
    <div class="img_outer">
      <van-image width="200" height="200" :src="bonus_point_image">
        <template v-slot:loading>
          <van-icon name="qr-invalid" size="5rem" />
        </template>
      </van-image>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        type="digit"
        v-model="consume_money"
        name="consume_money"
        label="本次消费金额"
        placeholder="本次消费金额"
        @input="onInput"
        :rules="[{ required: true, message: '请填写消费金额' }]"
      >
        <template #button>
          <van-button size="mini">元</van-button>
        </template>
      </van-field>
      <div style="margin: 24px">
        <van-button round block type="info" native-type="submit"
          >生成二维码</van-button
        >
      </div>
    </van-form>
    <van-notice-bar
      left-icon="volume-o"
      text="点击【生成二维码】按钮, 生成二维码, 二维码有效时间为60分钟"
    />
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import { Base64 } from "js-base64";
import NavBar from "@/components/NavBar";
import { getWxRetailerById } from "@/api/member";
import { show_qrcode } from "@/api/wechat";

export default {
  name: "RetailerPoints",
  components: {
    NavBar,
  },
  // computed: {
  //   ...mapGetters(["retailer_name"]),
  // },
  props: ["retailer_id"],
  data() {
    return {
      title: this.$route.meta.title,
      points: 0,
      ratio: 100,
      bonus_point_image: null,
      consume_money: null,
    };
  },
  mounted() {
    this.getRetailerInfo();
  },
  methods: {
    onInput() {
      // this.consume_money = this.consume_money.replace(/[^\d]/g, '')
      this.consume_money = this.consume_money == 0 ? "" : this.consume_money;
    },
    getRetailerInfo() {
      getWxRetailerById(this.retailer_id)
        .then((res) => {
          this.points = res.data.score || 0;
          this.ratio = res.data.ratio;
        })
        .catch(() => {
          this.$toast("获取信息错误!");
        });
    },
    // getPointsLists() {
    //   getRechargeList().then((res) => {
    //     this.pointLists = res.data;
    //   });
    // },

    onSubmit(values) {
      values["retailer_id"] = this.retailer_id;
      this.getQrCode(values);
    },
    getQrCode(values) {
      const pid = localStorage.getItem("openid");
      const base64_pid = Base64.encode(pid);
      const url = `http://${window.location.host}/#/retailer/${values["retailer_id"]}/bonus?money=${values["consume_money"]}&pid=${base64_pid}`;
      const params = {
        url: url,
      };
      show_qrcode(params)
        .then((res) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.bonus_point_image = data;
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
</style>